<template>
    <div class="gradientv">
        <div class="clorderbox">
            <input v-model="gradient.colorStart" type="color" class="color1">
            <div class="colorview" :style="bgStyle"></div>
            <input v-model="gradient.colorEnd" type="color" class="color1">
            <el-slider v-if="!gradient.isRadial" v-model="gradient.fontAngle" :min="0" :max="360"
                style="width:80px;display: inline-block;vertical-align: top;padding-left: 20px;"></el-slider>
        </div>
        <el-radio-group v-model="gradient.isRadial" size="mini">
            <el-radio-button :label="false">线性渐变</el-radio-button>
            <el-radio-button :label="true">径向渐变</el-radio-button>
        </el-radio-group>
    </div>
</template>

<script>
export default {
    name: "Gradient",
    props: {
        gradient: Object,
    },
    model: {
        prop: "gradient",
        event: "change",
    },
    data() {
        return {
            bgStyle: {}
        }
    },
    created() {
        if (!this.gradient) {
            this.gradient = {
                colorStart: "#ffffff",
                colorEnd: "#4AA8FF",
                fontAngle: 0,
                letterSpacing: 0,
                isRadial: false,
            }
            this.$emit("change", this.gradient);
        }

        this.setStyle();
    },
    mounted() {

    },
    methods: {
        setStyle() {
            if (this.gradient.isRadial) {
                this.bgStyle.backgroundImage = `radial-gradient(${this.gradient.colorStart}, ${this.gradient.colorEnd})`;
            } else {
                this.bgStyle.backgroundImage = `linear-gradient(${this.gradient.fontAngle}deg, ${this.gradient.colorStart}, ${this.gradient.colorEnd})`;
            }
        }
    },
    watch: {
        gradient: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();
            }
        }
    },

}
</script>

<style lang="scss" scoped>
.gradientv {
    .color1 {
        width: 18px;
        height: 40px;
        display: inline-block;
    }

    .colorview {
        width: 80px;
        height: 40px;
        display: inline-block;
        vertical-align: top;
    }
}
</style>